<template>
  <a-row justify="center"  class="article">
    <a-col span="24" :md="{span : 18}" :xl="{span : 16}">
      <a-card title="文章详情" :loading="loading" class="card" size="small" >
        <template #extra>
          <a @click="router.go(-1)" href="#">返回</a>
        </template>
        <div v-if="!loading" class="userInfo">
          <div class="left">
            <a-avatar @click="() => router.push(`/user/${article.userId}`)" style="cursor: pointer" :src="article.author?.avatar" />
          </div>
          <div class="right">
            <div class="user-describe">
              <div style="font-size: 16px;font-weight: 600">
                <span>{{article.author?.nickName}}</span>
              </div>
              <span style="font-size: 12px">{{article.createTime}}</span>
            </div>
            <div class="user-opt">
              <a-button  v-if="article.follow" @click="toFollow(article.userId)" size="small" >
                取消关注
              </a-button>
              <a-button v-else @click="toFollow(article.userId)" size="small" type="primary">
                关注
              </a-button>
            </div>
          </div>
        </div>
        <a-divider  style="cursor: pointer;font-size: 10px;margin-bottom: 0!important;" orientation="left"></a-divider>
        <preview-vditor v-if="!loading" :data="article.articleContent"/>
        <a-divider  style="cursor: pointer;font-size: 10px" orientation="left"></a-divider>
        <article-copy-right v-if="!loading" :author="article.author?.nickName" article-href="本站"/>
      </a-card>
      <a-card v-if="article && article.isComment" :loading="loading" size="small" style="margin-top: 30px"  title="评论区">
        <comments v-if="!loading && article.isComment" :type-id="article.id"/>
      </a-card>
    </a-col>
  </a-row>
  <Outline/>
  <a-back-top />
</template>

<script lang="ts" setup>
import router from '@/router';
import PreviewVditor from "@/components/PreviewVditor"
import Comments from "@/components/Comments"
import Outline from "@/components/Outline";
import {follow, getArticleById} from "@/api/article";
import ArticleCopyRight from "@/components/ArticleCopyRight/index.vue";
import {throttle} from "@/utils/common";
const article = ref();
const loading = ref<boolean>(true)
onMounted(() => {
  init();
})

const init = async () => {
  loading.value = true;
  const articleId = useRoute().params.id as string
  const res = await getArticleById(articleId);
  article.value = res.data
  loading.value = false;
}

const toFollow = throttle((userId) => {
  follow(userId);
  article.value.follow^=1;
})
</script>


<style lang="scss" scoped>
@import "/src/assets/base.scss";
.article{

  .userInfo{
    display: flex;
    align-items: center;
    .right{
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .user-describe{
        display: flex;
        flex-direction: column;
        margin-left: 15px;
      }


    }
  }
}
</style>
